@stencil-width: 200px;
#external-container {
  #x6-container {
    display: flex;
    flex-direction: row;
    border: 1px solid #dfe3e8;
    #stencil-container {
      // width: 180px;
      width: @stencil-width;
      height: 50vh;
      border-right: 1px solid #dfe3e8;
    }
    #x6-graph-container {
      display: flex;
      flex-direction: column;
      width: calc(100% - 200px);
      height: 100vh;
      margin: 0;
      padding: 0;
      #tool-bar-container {
        display: flex;
        width: 100%;
        height: 5vh;
        button {
          margin-left: 10px;
        }
      }
      #graph-container {
        // width: calc(100% - 180px);
        width: 100%;
        height: 95vh;
        background-color: #fff;
      }
    }
  }
}

.x6-widget-stencil {
  // width: 180px;
  width: @stencil-width;
  background-color: #fff;
}
.x6-widget-stencil-title {
  background-color: #fff;
}
.x6-widget-stencil-group-title {
  background-color: #fff !important;
}
.x6-widget-transform {
  margin: -1px 0 0 -1px;
  padding: 0px;
  border: 1px solid #239edd;
}
.x6-widget-transform > div {
  border: 1px solid #239edd;
}
.x6-widget-transform > div:hover {
  background-color: #3dafe4;
}
.x6-widget-transform-active-handle {
  background-color: #3dafe4;
}
.x6-widget-transform-resize {
  border-radius: 0;
}
.x6-widget-selection-inner {
  border: 1px solid #239edd;
}
.x6-widget-selection-box {
  opacity: 0;
}

:where(.css-dev-only-do-not-override-1y1298f).ant-pro-layout .ant-pro-layout-content {
  padding-top: 0;
  padding-bottom: 0;
}
@supports (padding-block: 0) and (padding-inline: 0) {
  :where(.css-dev-only-do-not-override-1y1298f).ant-pro-layout .ant-pro-layout-content {
    padding-block: 0;
    padding-inline: 0;
  }
}
